<template>
  <div class="user_list-page flexC">
    <div class="user_list-page flexC" style="margin-bottom: 20px;">
      <div class="pageHead flexC">
        <p>用例结果详情</p>
      </div>
      <div class="pageHead" style="display:flex;flex-wrap: wrap;padding-bottom: 16px;">
        <div style="display:flex;width: 380px;padding-bottom: 30px">
          <table style="margin-right: 10px;padding-top: 3px">场景名称</table>
          <Input v-model="test_model.testsuite_name" style="width: 300px"></Input>
        </div>

        <div style="display:flex;width: 380px;padding-bottom: 30px;padding-left: 10px">
          <table style="margin-right: 10px;padding-top: 3px">所属项目</table>
          <Input v-model="test_model.project_name" style="width: 300px"></Input>
        </div>

        <div style="display:flex;width: 380px;padding-left: 10px">
          <table style="margin-right: 10px;padding-top: 3px">版本序号</table>
          <Input v-model="test_model.version" style="width: 300px"></Input>
        </div>

        <div style="display:flex;width: 380px;padding-left: 10px">
          <table style="margin-right: 10px;padding-top: 3px">执行时间</table>
          <Input v-model="test_model.execute_time" style="width: 300px"></Input>
        </div>


        <div style="display:flex;width: 380px;">
          <table style="margin-right: 10px;padding-top: 3px">用例总数</table>
          <Input v-model="test_model.total_num" style="width: 300px"></Input>
        </div>

        <div style="display:flex;width: 380px;">
          <table style="margin-right: 10px;padding-top: 3px;margin-bottom: 30px;">成功数量</table>
          <Input v-model="test_model.passed_num" style="width: 300px"></Input>
        </div>

        <div style="display:flex;width: 380px;padding-left: 10px">
          <table style="margin-right: 10px;padding-top: 3px">失败数量</table>
          <Input v-model="test_model.failed_num" style="width: 300px"></Input>
        </div>

        <div style="display:flex;width: 380px;padding-left: 10px">
          <table style="margin-right: 10px;padding-top: 3px">执行耗时(ms)</table>
          <Input v-model="test_model.elapsed_ms" style="width: 270px"></Input>
        </div>

        <div style="display:flex;width: 380px;padding-left: 10px">
          <table style="margin-right: 10px;padding-top: 3px">测试结果</table>
          <Input v-model="test_model.status" style="width: 270px"></Input>
        </div>

      </div>


    </div>

    <div class="pageHead" style="padding-left: 0px;">
      <div class="pageHead">
       <div style="display: flex;justify-content: space-between">
                <p>结果列表</p>
                <div>
                  <Icon type="ios-leaf" size="24" color="rgb(25, 190, 107)"/>
                  <i style="margin-right: 15px;">通过</i>
                  <Icon type="ios-leaf" size="24" color="rgb(237, 64, 20)"/>
                  <i style="margin-right: 15px;">失败</i>
                </div>
              </div>
      </div>
        <div class="pageContent">
          <div class="pageHead">
            <Table
                border
                :columns="testsuitecolumns"
                :data="listdata"
                sortable="custom"
                ref="table"
                size="small"
            >
              <template slot-scope="{ row }" slot="project|interfaces">
                <strong>{{ row.project_name }} - {{ row.api_name }}</strong>
              </template>

              <template slot-scope="{ row }" slot="status">
                <Icon v-if="row.status == 'INITIAL'" type="ios-leaf" size="24" color="rgb(45, 183, 245)"/>
                <Icon v-if="row.status == 'PASS'" type="ios-leaf" size="24" color="rgb(25, 190, 107)"/>
                <Icon v-if="row.status == 'FAIL'" type="ios-leaf" size="24" color="rgb(237, 64, 20)"/>
              </template>
            </Table>
            <!--              <div>-->
            <!--                <Page-->
            <!--                    :total="page.total"-->
            <!--                    :page-size="page.size"-->
            <!--                    :current="page.index"-->
            <!--                    show-total-->
            <!--                    show-elevator-->
            <!--                    show-sizer-->
            <!--                    @on-change="changeSize"-->
            <!--                    @on-page-size-change="changePage"-->
            <!--                    style="margin-top: 20px;"-->
            <!--                />-->
            <!--              </div>-->
          </div>

        </div>

      </div>
  </div>
</template>

<script>
import vueJsonEditor from "vue-json-editor";
import {testsuite_reportsId, testsuite_testcase_reports} from '../../api/api'

export default {
  name: "testsuite_reports_details",
  components: {vueJsonEditor},
  data() {
    return {
      listdata: [],
      testsuitecolumns: [
        {
          title: "用例名称",
          key: "testcase_name",
          minWidth: 200,
          align: 'center',
          fixed: "left",
        },
        {
          title: "项目|接口",
          slot: "project|interfaces",
          minWidth: 125,
          width: 300,
          align: 'center'
        },

        {
          title: "请求URL",
          key: "url",
          width: 200,
          minWidth: 200,
        },
        {
          title: "执行时间",
          key: "execute_time",
          width: 160,
          align: 'center'
        },
        {
          title: "响应状态码",
          key: "actual_status_code",
          align: "center",
          width: 120,
        },
        {
          title: "响应时长(ms)",
          key: "elapsed_ms",
          align: "center",
          width: 150,
        },
        {
          title: "响应结果",
          key: "actual_response_data",
          align: "center",
          width: 200,
          ellipsis: true,
          render: (h, params) => {
            let texts = params.row.actual_response_data
            if (params.row.actual_response_data != null) {
              if (params.row.actual_response_data.length > 30) {
                texts = params.row.actual_response_data.slice(0, 30) + '...' // 进行数字截取
              } else {
                texts = params.row.actual_response_data
              }
            }
            return h('div', [
              h('Tooltip', {
                props: {
                  placement: 'top',
                  transfer: true
                }
              }, [texts, h('span', {
                slot: 'content',
                style: {
                  whiteSpace: 'normal'
                }
              }, params.row.actual_response_data)
              ])
            ])
          }
        },
        {
          title: "失败原因",
          key: "failure_reason",
          align: "center",
          width: 200,
          render: (h, params) => {
            let texts = params.row.failure_reason
            if (params.row.failure_reason != null) {
              if (params.row.failure_reason.length > 20) {
                texts = params.row.failure_reason.slice(0, 20) + '...' // 进行数字截取
              } else {
                texts = params.row.failure_reason
              }
            }
            return h('div', [
              h('Tooltip', {
                props: {
                  placement: 'top',
                  transfer: true
                }
              }, [texts, h('span', {
                slot: 'content',
                style: {
                  whiteSpace: 'normal'
                }
              }, params.row.failure_reason)
              ])
            ])
          }
        },
        {
          title: "测试结果",
          slot: 'status',
          align: "center",
          fixed: "right",
          width: 85,
        },
        {
          title: "操作",
          key: "action",
          width: 130,
          align: "center",
          fixed: "right",
          render: (h, params) => {
            let enableOrDisable = "";
            return h("div", [
              h(
                  "a",
                  {

                    on: {
                      click: () => {
                        this.pu_suite_details('crenvs2', params.row);
                      },
                    },
                  },
                  "详情"
              ),
              enableOrDisable,
            ]);

          },
        },
      ],
      exmodle2: false,
      test_model: {
        testsuite_name: '',
        project_name: '',
        execute_time: '',
        elapsed_ms: '',
        total_num: '',
        passed_num: '',
        failed_num: '',
        status: '',
        version: ''
      }
    }
  },

  created() {
    // console.log(this.$route.params.id)
    this.get_reports();
    this.get_testReportesIn_testsuite();
  },

  methods: {
    get_reports() {
      let id = this.$route.params.id
      testsuite_reportsId(id).then(res => {
        let data = res.data.data
        this.test_model.testsuite_name = data.testsuite_name
        this.test_model.project_name = data.project_name
        this.test_model.execute_time = data.execute_time
        this.test_model.elapsed_ms = data.elapsed_ms
        this.test_model.total_num = data.total_num
        this.test_model.passed_num = data.passed_num
        this.test_model.failed_num = data.failed_num
        this.test_model.status = data.status
        this.test_model.version = data.version
      })
    },

    get_testReportesIn_testsuite(){
      let id = this.$route.params.id
      testsuite_testcase_reports({'testsuite_reports':id}).then(res => {
        this.listdata = res.data.data
      })
    },

    pu_suite_details(name, v) {
      this.$router.push({
        name: 'testcase_reports_details',
        params: {
          id: v.id
        }
      })
    },
  },
}
</script>

<style scoped>

</style>
